<template>
  <div class="summary-style">
    <div class="style-modal">
      <div class="title">概要线条
        <ImgDropdown
          v-model="summaryStyle.lineShape"
          :imgList="summaryLineShapes"
          :col="2"
          @change="handleSummaryStyleChange($event, 'lineShape')" />
      </div>
      <div class="content">
        <div class="block">
          <div class="b__item flex w_auto margin_r_12">
            <p>颜色</p>
            <el-color-picker
              :teleported="false"
              v-model="summaryStyle.lineColor"
              @active-change="handleSummaryStyleChange($event, 'lineColor')"
              @show="handleColorPickShow"
              @hide="handleColorPickHide" />
          </div>
        </div>
      </div>
    </div>
    <div class="style-modal">
      <div class="title">概要主题
        <ImgDropdown
          v-model="summaryStyle.topicShape"
          :imgList="summaryTopicShapes"
          :col="3"
          @change="handleSummaryStyleChange($event, 'topicShape')" />
      </div>
      <div class="content">
        <div class="block">
          <div class="b__item flex w_auto margin_r_12">
            <p>边框颜色</p>
            <el-color-picker
              :teleported="false"
              show-alpha
              v-model="summaryStyle.topicStrokeColor"
              @active-change="handleSummaryStyleChange($event, 'topicStrokeColor')"
              @show="handleColorPickShow"
              @hide="handleColorPickHide" />
          </div>
          <div class="b__item flex flex_1">
            <p>填充</p>
            <el-color-picker
              :teleported="false"
              show-alpha
              v-model="summaryStyle.topicFill"
              @active-change="handleSummaryStyleChange($event, 'topicFill')"
              @show="handleColorPickShow"
              @hide="handleColorPickHide"/>
          </div>
        </div>
      </div>
    </div>
    <div class="style-modal">
      <div class="title">文本</div>
      <div class="content">
        <div class="block">
          <div class="b__item w_100 flex">
            <p>字体</p>
            <el-select
              v-model="summaryStyle.fontFamily"
              placeholder="青选择"
              style="width: 164px"
              @change="handleSummaryStyleChange($event, 'fontFamily')">
              <el-option
                v-for="item in FONTFAMILYOPTIONS"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="block">
          <div class="b__item flex_1 flex margin_r_12">
            <p>字号</p>
            <el-select v-model="summaryStyle.fontSize" placeholder="青选择" @change="handleSummaryStyleChange($event, 'fontSize')">
              <el-option
                v-for="item in FONTSIZEOPTIONS.slice(0, 8)"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="b__item w_auto flex">
            <p>颜色</p>
            <el-color-picker
              :teleported="false"
              v-model="summaryStyle.textColor"
              @active-change="handleSummaryStyleChange($event, 'textColor')"
              @show="handleColorPickShow"
              @hide="handleColorPickHide" />
          </div>
        </div>
        <div class="block">
          <el-checkbox @change="handleSummaryStyleChange($event, 'isRough')" v-model="summaryStyle.isRough" label="开启手绘模式" size="large" />
        </div>
      </div>
    </div>
    <div class="style-modal" style="margin-top: 36px;">
      <el-button style="width: 100%;" type="default" plain @click="handleResetSummaryStyle">重置样式</el-button>
    </div>
  </div>
</template>

<script setup>
import { reactive, watch, defineProps } from 'vue'
import { shortcutKeydown, resetcutKeydown } from '../shortcut-key'
import { FONTFAMILYOPTIONS, FONTSIZEOPTIONS } from '../config'
import mitter from '@/mitt'
import ImgDropdown from './ImgDropdown.vue'

const props = defineProps({
  style: {
    type: Object,
    default: () => ({})
  }
})
const summaryLineShapes = [
  { img: require('@/assets/images/xmind/summary/line-shape/elbow.svg'), value: 'elbow' },
  { img: require('@/assets/images/xmind/summary/line-shape/square.svg'), value: 'square' },
  { img: require('@/assets/images/xmind/summary/line-shape/curve.svg'), value: 'curve' },
  { img: require('@/assets/images/xmind/summary/line-shape/straight.svg'), value: 'straight' }
]

const summaryTopicShapes = [
  { img: require('@/assets/images/xmind/shape/default.svg'), value: 'default' },
  { img: require('@/assets/images/xmind/shape/circleRect.svg'), value: 'circleRect' },
  { img: require('@/assets/images/xmind/shape/rect.svg'), value: 'rect' },
  { img: require('@/assets/images/xmind/shape/diamond.svg'), value: 'diamond' },
  { img: require('@/assets/images/xmind/shape/circle.svg'), value: 'circle' },
  { img: require('@/assets/images/xmind/shape/parallelogram.svg'), value: 'parallelogram' },
  { img: require('@/assets/images/xmind/shape/polygonSide6.svg'), value: 'polygonSide6' },
  { img: require('@/assets/images/xmind/shape/singleBreakangle.svg'), value: 'singleBreakangle' },
  { img: require('@/assets/images/xmind/shape/ellipticRect.svg'), value: 'ellipticRect' }
]
const summaryStyle = reactive({
  lineShape: 'straight',
  lineColor: '#000000',
  topicShape: 'default',
  topicFill: '#00000000',
  topicStrokeColor: '#000000',
  fontSize: 16,
  fontFamily: 'nevermind',
  textColor: '#000000',
  isRough: false
})

watch(() => props.style, newVal => {
  for (const key in newVal) {
    if (newVal[key] !== undefined) {
      summaryStyle[key] = newVal[key]
    }
  }
}, { deep: true, immediate: true })

function handleSummaryStyleChange (styleValue, styleName) {
  summaryStyle[styleName] = styleValue
  mitter.emit('update-summary-style', { styleValue, styleName })
}

function handleResetSummaryStyle () {
  mitter.emit('reset-summary-style')
}

function handleColorPickShow () {
  resetcutKeydown()
}

function handleColorPickHide () {
  shortcutKeydown()
}
</script>

<style lang="scss" scoped>
.summary-style {
  .style-modal {
    .title {
      display: flex;
      font-size: 14px;
      font-weight: 600;
      color: #000;
      align-items: center;
      justify-content: space-between;
    }
    .content {
      .block {
        display: flex;
        margin-top: 16px;
        justify-content: space-between;
        .b__item {
          width: 48%;
          span {
            color: #999;
            font-size: 12px;
            margin-bottom: 6px;
            display: inline-block;
            display: block;
          }
          p {
            color: #333;
            font-size: 12px;
            margin-right: 12px;
            flex-shrink: 0;
          }
          &.flex {
            display: flex;
            align-items: center;
          }
          &.w_100 {
            width: 100%;
          }
          &.w_auto {
            width: auto;
          }
          &.flex_1 {
            flex: 1;
            width: 0;
          }
          &.margin_r_12 {
            margin-right: 12px;
          }
        }
      }
    }
    & + .style-modal {
      margin-top: 20px;
    }
  }
}
</style>
